<template>
  <el-table :data="tableData" 
            style="width: 100%"
            lazy
            table-layout="auto"
            empty-text="发布一篇文章试试吧 ！" >
    <!-- <el-table-column prop="id" label="编号" width="230" :show-overflow-tooltip="false" /> -->
    <el-table-column fixed prop="title" label="标题"  />
    <el-table-column prop="articleImages" label="封面" width="120">
      <template #default="{ row }">
        <img :src="row.articleImages" alt="" style="width: 100%; height: auto;">
      </template>
    </el-table-column>

    <el-table-column prop="articleExcerpt" label="主要内容" />
    <el-table-column prop="articleTags" label="标签" />
    <el-table-column prop="articleCategory" label="分类" />
    <el-table-column prop="views" label="浏览量" sortable />
    <el-table-column prop="articleUpdated" label="上次修改时间" sortable/>

    <el-table-column fixed="right" label="操作">
      <template #default="{row}">
        <el-button type="primary" size="small" @click="handleClick(row.id)"
          >详情</el-button
        >

        <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确定删除?"
            @confirm="deleteClick(row.id)"
            @cancel="cancelEvent"
            >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>

        <!-- <el-button type="danger" size="small" @click="deleteClick(row.id)">删除</el-button> -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import axios from 'axios'
import VueCookies from 'vue-cookies'
import { onMounted } from 'vue';
import { getCurrentInstance, ref } from 'vue';
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const loginInfo = VueCookies.get("loginInfo");
const account = loginInfo ? loginInfo.account : null; // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null
const url = 'http://localhost:8081/api/publishArticle';
const router = useRouter();

const handleClick = (id) => {
  console.log('click', id)
  setTimeout(() => {
          router.push({
              path : '/deta',
              query: { id: id }
            });
          }, 1000);
}

const deleteClick = (id) =>{
  try{
    const data = {
      userAccount: account,
      articleId: id
    };

    console.log(data.articleId);

    axios.post('http://localhost:8081/api/deleteArticle', data)
      .then(response => {
        if (response.data.code === 2000) {
          // TODO: 处理删除成功的情况
          getArticle();
          proxy.$message.success('删除成功');
        } else {
          proxy.$message.error(response.data.message);
        }
      })
      .catch(error => {
        proxy.$message.error('删除文章失败');
      });

  }catch(e){
    proxy.$message.error('删除文章失败');
  }
}

const getArticle = async() =>{
  try{
    const data = {
      userAccount: account,
      category: '---------'
    };

    const res = await axios.post(url, data);

    if (res.data.code === 2000) {
      tableData.value = res.data.tableData;
    }else {
      proxy.$message.error(res.data.message);
      tableData.value = [];
    }
  } catch(e){
    proxy.$message.error('文章获取失败');
  }
}

onMounted(() => {
  getArticle();
});
</script>
